<template>
  <div style="width: 100%;height: 100vh;padding: 40px 44px;color:var(--color-neutral-10);max-width: 1550px;margin: 0 auto">
    <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">获取和处理数据</p>
    <div style="width: 100%">
      <div style="margin-bottom: 20px">
        <p style="font-size: 16px;font-weight: bold;margin-bottom: 20px">爬虫</p>
        <div v-if="data.crawler.status!=undefined && data.crawler.status.status!=3" style="width: 100%;margin-bottom: 20px">
          <p style="font-size: 24px">{{ data.crawler.status.content }}</p>
          <div>
            <p v-if="data.crawler.status!=2">当前任务名称：{{ data.crawler.status.results.taskName }}</p>
            <span>{{ data.crawler.status.status==2?('已完成'):('正在进行 ' + (parseInt((data.crawler.status.status*10000))/100).toString() + '%') }}</span><br>
            <span>{{ data.crawler.status.status==2?('已用时间：' + data.crawler.status.time):('已用时间：' + data.crawler.status.results.elapsedTime + ' 剩余时间：' + data.crawler.status.results.remainingTime )}}</span>
            <v-progress-linear style="width: calc(100%);margin-bottom: 10px" :model-value="data.crawler.status.status * 100"></v-progress-linear>
            <v-btn v-if="data.crawler.status.status==2" variant="text" style="margin-right: 10px" @click="exportData">导出数据</v-btn>
            <v-btn v-if="data.crawler.status.status==2" variant="text" @click="exitTask">退出任务</v-btn>
          </div>
        </div>
        <div v-if="data.crawler.status!=undefined && data.crawler.status.status==3" style="width: 100%;margin-bottom: 20px">
          <p style="font-size: 24px">{{ data.crawler.status.content }}</p>
          <div>
            <p>请重新开始当前任务，当前任务名称：{{ data.crawler.status.results.taskName }}</p>
            <v-btn variant="text" @click="exitTask">退出任务</v-btn>
          </div>
        </div>
        <div v-if="data.crawler.status==undefined">
          <p style="margin-bottom: 20px">新建任务</p>
          <div style="position: relative">
            <v-select
                v-model="data.crawler.selectedTaskName"
                :disabled="data.crawler.isStarting"
                label="选择任务"
                :items="['获取志愿表', '获取全部一分一段表', '获取今年一分一段表', '获取前1年一分一段表', '获取前2年一分一段表', '获取前3年一分一段表', '获取全部学校信息表', '获取全部学校开设专业信息表', '获取全部专业信息表', '根据学校信息表更新志愿表']"
                variant="outlined"
                style="width: 400px;display: inline-block;min-width: 320px;margin-right: 5px"
            ></v-select>
            <v-select
                style="width: 100px;display: inline-block;margin-right: 5px"
                label="选择城市"
                v-if="data.crawler.selectedTaskName=='获取志愿表' || data.crawler.selectedTaskName=='获取今年一分一段表' || data.crawler.selectedTaskName=='获取前1年一分一段表' || data.crawler.selectedTaskName=='获取前2年一分一段表' || data.crawler.selectedTaskName=='获取前3年一分一段表'"
                variant="outlined"
                v-model="data.crawler.selectedProvinceName"
                @update:model-value="provinceChanged"
                :items="['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾']"
            ></v-select>
            <v-select
                style="width: 100px;display: inline-block;margin-right: 5px"
                label="选择类型"
                v-if="(data.crawler.selectedTaskName=='获取今年一分一段表' || data.crawler.selectedTaskName=='获取前1年一分一段表' || data.crawler.selectedTaskName=='获取前2年一分一段表' || data.crawler.selectedTaskName=='获取前3年一分一段表') && data.crawler.selectedProvinceName!=''"
                variant="outlined"
                v-model="data.crawler.selectedTypeName"
                :items="data.crawler.selectedProvinceTypes"
            ></v-select>
            <v-btn @click="startTask" :disabled="data.crawler.selectedTaskName==''" :loading="data.crawler.isStarting" variant="text" style="display: inline-block;height: 56px;position: absolute;top: 0;">新建</v-btn>
          </div>

        </div>
      </div>
      <div>
        <!-- <p style="font-size: 16px;font-weight: bold;margin-bottom: 20px">合并文件</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import {decodeString} from "@/utlis/tool";
const tool = require('@/utlis/tool')
const config = require('@/config')
const XLSX = require('xlsx')

export default {
  name: '',
  data() {
    return {
      data:{
        crawler:{
          status:undefined,
          isStarting:false,
          selectedTaskName:'',
          selectedProvinceName:'',
          provinceTypes:[],
          selectedTypeName:'',
          selectedProvinceTypes:[]
        },
        allowWSMsg:true
      },
      ws:undefined
    }
  },

  methods: {
    provinceChanged(){
      let re = []
      for(let i=0;i<this.data.crawler.provinceTypes.length;i++){
        if(this.data.crawler.provinceTypes[i].name==this.data.crawler.selectedProvinceName){
          for(let i1=0;i1<this.data.crawler.provinceTypes[i].type.length;i1++){
            re.push(this.data.crawler.provinceTypes[i].type[i1].name)
          }
        }
      }
      this.data.crawler.selectedProvinceTypes = re
    },
    async getProvinceTypes(){
      let re = await tool.axiosPost(config.serverURL,'/bg/crawler/SRTTypes',{
        token:this.bgData.loginedAdminInfo.token
      })
      this.data.crawler.provinceTypes = re.results
    },
    exportData(){
      window.open(config.serverURL + '/download/' + this.data.crawler.status.results,'_blank')
    },
    exitTask(){
      this.ws.send(tool.encodeString(JSON.stringify({
        token:this.bgData.loginedAdminInfo.token,
        operationName:'bgTaskExit'
      })))
    },
    async startTask(){
      this.data.crawler.isStarting = true
      let taskName = ''
      let data = {

      }
      //
      switch (this.data.crawler.selectedTaskName) {
        case '获取志愿表':
          data = {
            province:this.data.crawler.selectedProvinceName
          }
          break
        case '获取前1年一分一段表':
          data = {
            yearSub:1,
            province:this.data.crawler.selectedProvinceName,
            type:this.data.crawler.selectedTypeName
          }
          break
        case '获取前2年一分一段表':
          data = {
            yearSub:2,
            province:this.data.crawler.selectedProvinceName,
            type:this.data.crawler.selectedTypeName
          }
          break
        case '获取前3年一分一段表':
          data = {
            yearSub:3,
            province:this.data.crawler.selectedProvinceName,
            type:this.data.crawler.selectedTypeName
          }
          break
        case '获取今年一分一段表':
          data = {
            yearSub:0,
            province:this.data.crawler.selectedProvinceName,
            type:this.data.crawler.selectedTypeName
          }
          break
        case '获取全部一分一段表':
          data = {}
          break
        case '获取全部学校信息表':
          data = {}
          break
        case '获取全部学校开设专业信息表':
          data = {}
          break
        case '获取全部专业信息表':
          data = {}
          break
        case '获取全部学校图片':
          data = {}
          break
        case '根据学校信息表更新志愿表':
          data = {}
          break
      }
      //
      switch (this.data.crawler.selectedTaskName) {
        case '获取志愿表':
          taskName = 'bgGetVolunteer'
          break
        case '获取前1年一分一段表':
          taskName = 'bgGetSRT1'
          break
        case '获取前2年一分一段表':
          taskName = 'bgGetSRT2'
          break
        case '获取前3年一分一段表':
          taskName = 'bgGetSRT3'
          break
        case '获取今年一分一段表':
          taskName = 'bgGetSRT0'
          break
        case '获取全部一分一段表':
          taskName = 'bgGetSRTAll'
          break
        case '获取全部学校信息表':
          taskName = 'bgGetSchoolInfo'
          break
        case '获取全部学校开设专业信息表':
          taskName = 'bgGetSchoolSpecialInfo'
          break
        case '获取全部专业信息表':
          taskName = 'bgGetSpecialInfo'
          break
        case '获取全部学校图片':
          taskName = 'bgGetAllSchoolImage'
          break
        case '根据学校信息表更新志愿表':
          taskName = 'bgUpdateVolunteerBySchool'
          break
      }
      //
      let re = await tool.axiosPost(this.appData.serverURL,'/bg/task/startTask',{
        token:this.bgData.loginedAdminInfo.token,
        name:taskName,
        data:data
      })
      console.log({
        token:this.bgData.loginedAdminInfo.token,
        name:taskName,
        data:data
      })
      await tool.waitSeconds(3)
      this.data.crawler.isStarting = false
      if(re.status==-2){
        tool.axiosPostUnauthorized()
        return
      }
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  async mounted() {
    this.getProvinceTypes()

    const ws = new WebSocket(config.serverWSURL)
    this.ws = ws
    ws.onopen = (res) => {
      ws.send(tool.encodeString(JSON.stringify({
        token:this.bgData.loginedAdminInfo.token,
        operationName:'bgTaskStatus'
      })))
    }
    ws.onmessage = (res) => {
      let re = JSON.parse(decodeString(res.data))
      if(this.data.allowWSMsg==false){
        return
      }
      if(re.status==-2){
        this.data.allowWSMsg=false
        tool.axiosPostUnauthorized()
        return
      }
      switch (re.type) {
        case 'bgTaskStatus':
          if(re.status==-1){
            this.data.crawler.status = undefined
            return
          }
          this.data.crawler.status = re
          break
      }
    }
  },

  props: {
    appData:undefined,
    bgData:undefined
  },

  //监听属性 类似于data概念",
  computed: {},

  //监控data中的数据变化",
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {

  },

  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },

  // 生命周期 - 销毁之前调用
  beforeDestroy() {
  },

  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },

  //生命周期 - 销毁完成"
  destroyed() {
  },

  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  }
}
</script>

<style scoped>

</style>